<script setup>
import { ref } from 'vue'

const form = ref({
  userId: '',
  name: '',
  idCard: '',
  phone: '',
  company: '',
  insuranceType: '养老保险',
  baseAmount: ''
})

const insuranceTypes = [
  '养老保险',
  '医疗保险', 
  '失业保险',
  '工伤保险',
  '生育保险'
]

const submitForm = () => {
  // 这里可以添加表单验证和提交逻辑
  console.log('提交表单:', form.value)
  alert('参保登记成功！')
}

const resetForm = () => {
  form.value = {
    userId: '',
    name: '',
    idCard: '',
    phone: '',
    company: '',
    insuranceType: '养老保险',
    baseAmount: ''
  }
}
</script>

<template>
  <div class="card">
    <h2>参保登记</h2>
    <form @submit.prevent="submitForm" class="form">
      <div class="form-grid">
        <div class="form-group">
          <label for="userId">用户ID *</label>
          <input 
            id="userId"
            v-model="form.userId" 
            type="text" 
            placeholder="请输入用户ID"
            required
          />
        </div>
        
        <div class="form-group">
          <label for="name">姓名 *</label>
          <input 
            id="name"
            v-model="form.name" 
            type="text" 
            placeholder="请输入姓名"
            required
          />
        </div>
        
        <div class="form-group">
          <label for="idCard">身份证号 *</label>
          <input 
            id="idCard"
            v-model="form.idCard" 
            type="text" 
            placeholder="请输入身份证号"
            maxlength="18"
            required
          />
        </div>
        
        <div class="form-group">
          <label for="phone">联系电话 *</label>
          <input 
            id="phone"
            v-model="form.phone" 
            type="tel" 
            placeholder="请输入联系电话"
            required
          />
        </div>
        
        <div class="form-group">
          <label for="company">参保单位 *</label>
          <input 
            id="company"
            v-model="form.company" 
            type="text" 
            placeholder="请输入参保单位名称"
            required
          />
        </div>
        
        <div class="form-group">
          <label for="insuranceType">险种类型 *</label>
          <select id="insuranceType" v-model="form.insuranceType" required>
            <option v-for="type in insuranceTypes" :key="type" :value="type">
              {{ type }}
            </option>
          </select>
        </div>
        
        <div class="form-group">
          <label for="baseAmount">缴费基数 *</label>
          <input 
            id="baseAmount"
            v-model="form.baseAmount" 
            type="number" 
            placeholder="请输入缴费基数"
            min="0"
            required
          />
        </div>
      </div>
      
      <div class="form-actions">
        <button type="button" @click="resetForm" class="btn btn-secondary">
          重置
        </button>
        <button type="submit" class="btn btn-primary">
          提交登记
        </button>
      </div>
    </form>
  </div>
</template>

<style scoped>
.card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-top: 0;
}

h2 {
  color: var(--primary-blue);
  margin-bottom: 24px;
  font-size: 28px;
  font-weight: 600;
}

.form {
  max-width: 800px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

label {
  font-weight: 500;
  color: #333;
  font-size: 16px;
}

input, select {
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 18px;
  transition: border-color 0.3s ease;
}

input:focus, select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--primary-blue);
  color: white;
}

.btn-primary:hover {
  background: #1565c0;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
  }
}
</style>
